﻿<zoil:ZComponent x:Class="ZOIL.Library.Components.ZPortalView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:zoil="http://zoil.codeplex.com/schemas/2012"
              xmlns:s="http://schemas.microsoft.com/surface/2008"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                 xmlns:e="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
                 zoil:ZInformationLandscape.ZoomTarget="True"
              Height="400" 
              Width="500" 
              MinWidth="100" 
              MinHeight="100" 
              Panel.ZIndex="1">
    <i:Interaction.Behaviors>
        <zoil:ObjectManipulationBehavior IsDraggable="True"
                                         IsResizable="True" />
    </i:Interaction.Behaviors>
    <zoil:EventCommander.Mappings>
        <zoil:CommandEventCollection>
            <zoil:CommandEvent Command="{Binding Path=DragCommand}" Event="SizeChanged"/>
        </zoil:CommandEventCollection>
    </zoil:EventCommander.Mappings>
    
    <zoil:ZComponent.Resources>

        <Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="IsTabStop" Value="false"/>
            <Setter Property="Focusable" Value="false"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="10"/>
            <Setter Property="Width" Value="10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Rectangle Name="Rect" Fill="{TemplateBinding Slider.Foreground}" RadiusX="2" RadiusY="2"/>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Rect" Property="Fill" Value="Black"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Rect" Property="Fill" Value="LightGray"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
            <Grid Width="{TemplateBinding Slider.Width}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="Blue" Height="1" Visibility="Collapsed" />
                <Border Name="TrackBackground" Margin="0" CornerRadius="1" Height="2" Grid.Row="1">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0" Color="#55000000"/>
                            <GradientStop Offset="1" Color="#FF000000"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>

                <Track Grid.Row="1" Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyle}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Visibility="Collapsed" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TickBar Name="TopTick" SnapsToDevicePixels="True" Placement="Left" Fill="Blue" Width="4" Visibility="Collapsed" />
                <Border Name="TrackBackground" Margin="0" CornerRadius="1" Width="2" Grid.Column="1">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0" Color="#55000000"/>
                            <GradientStop Offset="1" Color="#FF000000"/>
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
                <Track Grid.Column="1" Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumbStyle}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Column="2" Fill="{TemplateBinding Foreground}" Placement="Right" Width="4" Visibility="Collapsed" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style TargetType="{x:Type Slider}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinWidth" Value="40" />
                    <Setter Property="MinHeight" Value="21" />
                    <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
                </Trigger>
                <Trigger Property="Orientation" Value="Vertical">
                    <Setter Property="MinWidth" Value="21" />
                    <Setter Property="MinHeight" Value="40" />
                    <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
                </Trigger>
            </Style.Triggers>
        </Style>
        
    </zoil:ZComponent.Resources>

    <Grid Background="Transparent" x:Name="MyGrid" Cursor="Hand">
        <Border BorderBrush="#FF000000" Background="#55555555" BorderThickness="1" Padding="40" Margin="5" CornerRadius="5" x:Name="PortalBorder">
            <zoil:ZInformationLandscape.ZoomModifier>
                <zoil:ThicknessModifier Property="Border.BorderThickness" Modifier="0.0"/>
            </zoil:ZInformationLandscape.ZoomModifier>
            <Border Background="#FF333333" BorderBrush="#FF000000" BorderThickness="1" Padding="10" CornerRadius="5" ClipToBounds="True">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Border Background="#FF333333" CornerRadius="4, 4, 0, 0" x:Name="TitleGrid" Grid.Row="0">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto" MinWidth="39" />
                            </Grid.ColumnDefinitions>
                            <Border CornerRadius="5" Background="#FF000000" Width="Auto" Margin="4" Padding="0" Grid.Column="0">
                                <TextBox BorderThickness="0" Background="Transparent" Foreground="YellowGreen" HorizontalContentAlignment="Center" VerticalAlignment="Center" IsHitTestVisible="False">Portal</TextBox>
                            </Border>
                            
                            <s:SurfaceButton x:Name="ClosePortalSurfaceButton" Grid.Column="1" Background="Black" FontSize="16" Foreground="White" Content="x" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0, 0, 4, 0">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="Click">
                                        <e:EventToCommand Command="{Binding Path=ClosePortalCommand, Mode=OneWay}" PassEventArgsToCommand="False" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </s:SurfaceButton>
                        </Grid>
                    </Border>
                    <Grid Grid.Row="1">
                        <s:SurfaceScrollViewer>
                            <ListBox Background="Black" Foreground="White" ItemsSource="{Binding Path=Model.PortalShape.SelectedElements}" BorderThickness="0">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Horizontal">
                                            <Ellipse Width="50" Height="50" Stroke="YellowGreen" StrokeThickness="2">
                                                <Ellipse.Fill>
                                                    <ImageBrush ImageSource="{Binding Path=PosterPath}" Stretch="Fill"/>
                                                </Ellipse.Fill>
                                            </Ellipse>
                                            <TextBlock Foreground="White" FontSize="10" Text="{Binding Path=Title}" VerticalAlignment="Center"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
                        </s:SurfaceScrollViewer>
                    </Grid>
                </Grid>
            </Border>
        </Border>
    </Grid>

</zoil:ZComponent>
